import { Story, Canvas } from '@storybook/addon-docs';

# Expandable Rows

Adding Expandable Rows functionality is easy. Let's make our rows expandable:

```js
function MyComponent() {
	return <DataTable columns={columns} data={data} expandableRows />;
}
```

## Custom Expander component

Next, we'll need to create a custom component to display our data and pass it into `DataTable`:

```js
// data provides access to your row data
const ExpandedComponent = ({ data }) => <pre>{JSON.stringify(data, null, 2)}</pre>;

function MyComponent() {
	return <DataTable columns={columns} data={data} expandableRows expandableRowsComponent={ExpandedComponent} />;
}
```

You'll notice that `expandableRowsComponent` has a function signtaure of `({ data }) => ...`. React Data Table handles passing your row `data` into your custom expandable component so you can access that rows fields.

<Canvas>
	<Story id="expandable-basic--basic" />
</Canvas>

## TypeScript

### Basic Expandable component

With TypeScript we'll need to use the `ExpanderComponentProps` type and pass it our type or interface. Here's a fully working example:

```ts
import * as React from 'react';
import DataTable, { ExpanderComponentProps } from 'react-data-table-component';

type DataRow = {
	title: string;
	director: string;
	year: string;
};

const columns: TableColumn<DataRow>[] = [
	{
		name: 'Title',
		selector: row => row.title,
	},
	{
		name: 'Director',
		selector: row => row.director,
	},
	{
		name: 'Year',
		selector: row => row.year,
	},
];

// data provides access to your row data
const ExpandedComponent: React.FC<ExpanderComponentProps<DataRow>> = ({ data }) => {
	return <pre>{JSON.stringify(data, null, 2)}</pre>;
};

function MyComponent() {
	return <DataTable columns={columns} data={data} expandableRows expandableRowsComponent={ExpandedComponent} />;
}
```

### expandableRowsComponentProps

expandableRowsComponentProps allows you to pass additional props to your expander component and prevents TypeScript from complaining:

```ts
import * as React from 'react';
import DataTable, { ExpanderComponentProps } from 'react-data-table-component';

interface Row {
	title: string;
	director: string;
	year: string;
}

interface Props extends ExpanderComponentProps<Row> {
	// currently, props that extend ExpanderComponentProps must be set to optional.
	someTitleProp?: string;
}

const ExpandableRowComponent: React.FC<Props> = ({ data, someTitleProp }) => {
	return (
		<>
			<p>{someTitleProp}</p>
			<p>{data.title}</p>
			<p>{data.director}</p>
			<p>{data.year}</p>
		</>
	);
};
```

## Accessibility

You can tab through expanders and use the space bar or enter keys to expand.
